<template>
    <div class="popupBox">
        <div class="d-flex justify-content-between align-items-center ">
            <div></div>
            <i class="bi bi-x-octagon closeBtn" @click="$emit('closepup')"></i>
        </div>
        <div class="">
            <slot></slot>
        </div>
    </div>
    <div class="popupBackground"></div>
</template>
<script setup lang="ts">
const emit = defineEmits(['closepup'])
</script>
<style scoped lang='scss'>
.popupBox {
    position: fixed;
    height: 90vh;
    width: 90vw;
    top: 5vh;
    left: 5vw;
    background: #fff;
    z-index: 2022;
    border-radius: 10px;
    padding: 20px;

    .closeBtn {
        font-size: 1.2rem;

        &:hover {
            color: red;
        }
    }
}

.popupBackground {
    position: fixed;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    opacity: 0.5;
    background: rgb(114, 113, 113);
    z-index: 2021;

}
</style>